<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="/static/vue/vue.js"></script>
    <script src="/static/axios/axios.js"></script>
    <%--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--%>
    <script src="https://unpkg.com/axios@0.21.1/dist/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/static/element/index.css">
    <!-- 引入组件库 -->
    <script src="/static/element/index.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>个人中心</title>
</head>
<body>
<div id="app">
    <el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1"><a href="/">首页</a></el-menu-item>
        <el-menu-item index="2"><a href="/goShoppingCart">购物车</a></el-menu-item>
        <el-menu-item index="3"><a href="/goUser">${user.userName} 个人中心 </a></el-menu-item>
        <c:if test="${user.id!=null}">
            <el-menu-item index="3"><a href="/logout">注销 ${user.userName}</a></el-menu-item>
        </c:if>
    </el-menu>
    <br><br><br><br><br>
    <div align="center">
        欢迎 ${user.userName}
        <br>
        <div>您的购买记录:</div>
        <div v-for="order in orders">
            <span>购买时间: {{order.createDate}}</span>
            <br>
            <span>购买共花费: {{order.totalMoney}} ￥</span>
        </div>
    </div>

</div>
<script type="application/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            message: "33",
            name: "like",
            orders: ""
        },
        created() {
            let id = '${user.id}'
            console.log(id);
            if (id == '' || id == null || id == undefined) {
                window.location.href = "/goLogin"
            }
            this.getOrderHistory()
        },
        methods: {
            getOrderHistory() {
                axios.request({
                    url: "/goods/getOrderHistory",
                    method: "get",
                }).then(res => {
                    this.orders = res.data.data
                });
            }
        }
    })
</script>
<hr>
</body>
</html>